<template>
  <el-card
    id="dataDownload-card"
    style="height: calc(100vh - 10rem);overflow: auto;"
  >

   <!-- 文档搜索输入框 -->
  <div class="fileSearchInput">
     <el-autocomplete
        v-model="searchFileName"
        :fetch-suggestions="querySearch"
        
        clearable
        placeholder="请输入文件名称"
        @select="handleSelect"
        @clear="clearFileNameInput"
      />
  </div>
   

    <!-- 展示文件列表 -->
    <span
      class="fileListBox"
      v-for="(i,index) in fileNames"
    >
      <!-- 文件名称 -->
      <span class="fileName">
        <svg
          t="1651215904187"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2154"
          width="200"
          height="200"
        >
          <path
            d="M145.6 0C100.8 0 64 36.8 64 81.6v860.8C64 987.2 100.8 1024 145.6 1024h732.8c44.8 0 81.6-36.8 81.6-81.6V324.8L657.6 0h-512z"
            fill="#45B058"
            p-id="2155"
          ></path>
          <path
            d="M374.4 862.4c-3.2 0-6.4-1.6-8-3.2l-59.2-80-60.8 80c-1.6 1.6-4.8 3.2-8 3.2-6.4 0-11.2-4.8-11.2-11.2 0-1.6 0-4.8 1.6-6.4l62.4-81.6-57.6-78.4c-1.6-1.6-3.2-3.2-3.2-6.4 0-4.8 4.8-11.2 11.2-11.2 4.8 0 8 1.6 9.6 4.8l56 73.6 54.4-73.6c1.6-3.2 4.8-4.8 8-4.8 6.4 0 12.8 4.8 12.8 11.2 0 3.2-1.6 4.8-1.6 6.4l-59.2 76.8 62.4 83.2c1.6 1.6 3.2 4.8 3.2 6.4 0 6.4-6.4 11.2-12.8 11.2z m160-1.6H448c-9.6 0-17.6-8-17.6-17.6V678.4c0-6.4 4.8-11.2 12.8-11.2 6.4 0 11.2 4.8 11.2 11.2v161.6h80c6.4 0 11.2 4.8 11.2 9.6 0 6.4-4.8 11.2-11.2 11.2z m112 3.2c-28.8 0-51.2-9.6-67.2-24-3.2-1.6-3.2-4.8-3.2-8 0-6.4 3.2-12.8 11.2-12.8 1.6 0 4.8 1.6 6.4 3.2 12.8 11.2 32 20.8 54.4 20.8 33.6 0 44.8-19.2 44.8-33.6 0-49.6-113.6-22.4-113.6-89.6 0-32 27.2-54.4 65.6-54.4 24 0 46.4 8 60.8 20.8 3.2 1.6 4.8 4.8 4.8 8 0 6.4-4.8 12.8-11.2 12.8-1.6 0-4.8-1.6-6.4-3.2-14.4-11.2-32-16-49.6-16-24 0-40 11.2-40 30.4 0 43.2 113.6 17.6 113.6 89.6 0 27.2-19.2 56-70.4 56z"
            fill="#FFFFFF"
            p-id="2156"
          ></path>
          <path
            d="M960 326.4v16H755.2s-102.4-20.8-99.2-108.8c0 0 3.2 92.8 96 92.8h208z"
            fill="#349C42"
            p-id="2157"
          ></path>
          <path
            d="M656 0v233.6c0 25.6 19.2 92.8 99.2 92.8H960L656 0z"
            fill="#FFFFFF"
            p-id="2158"
          ></path>
        </svg>{{i}}
      </span>
      <span
        class="downLoadBtn"
        @click="dataDownload(i)"
      >download</span>
    </span>

    <!-- 上传文件 -->
    <el-upload
      ref="uploadRef"
      :action="baseURL+'/dataDownload/uploadFiles'"
      :auto-upload="false"
      :limit="10"
      show-file-list
      :multiple="true"
      class="upload"
      :on-success="success"
    >
      <template #trigger>
        <el-button
          type="primary"
          style="margin: 10px 10px"
        >选择文件</el-button>
      </template>

      <el-button
        type="success"
        @click="submitUpload"
        style="margin: 10px 10px"
      >
        上传文件
      </el-button>

      <template #tip>
        <div class="el-upload__tip">
          请尽量选择.xls或.xlsx类型文件
        </div>
      </template>
    </el-upload>
  </el-card>

</template>

<script setup>
import {
  reactive,
  ref,
  onActivated,
  onDeactivated,
  watch,
  onMounted,
  nextTick,
  h,
} from "vue";
import { ElMessage } from "element-plus";

import {
  dataDownloadReq,
  getDownloadFilesNameReq,
} from "@/networks/dataDownloadReq.js";
import { baseURL } from "@/networks/request.js";
import axios from "axios";

let fileNames = reactive([]);

let uploadRef = ref();
let searchFileName = ref("");//搜索文件的名称


// 生成下载链接
async function dataDownload(name) {
  let { data: res } = await dataDownloadReq({
    fileName: name,
  });
  // console.log(res);
  ElMessage.success("正在下载");
  const blob = new Blob([res]);
  const URL = window.URL.createObjectURL(blob); // 生成一个 Blob URL
  const fileName = `${name}`; //
  const listNode = document.createElement("a");
  listNode.download = fileName;
  listNode.style.display = "none";
  listNode.href = URL; // 文件流生成的url
  document.body.appendChild(listNode);
  listNode.click(); // 模拟在按钮上实现一次鼠标点击
  window.URL.revokeObjectURL(listNode.href); // 释放 URL 对象
  document.body.removeChild(listNode); // 移除 a 标签
}

// 获取可下载文件的列表
async function getFilesName() {
  try {
    const { data: res } = await getDownloadFilesNameReq();
    if (res.status != 200) {
      return ElMessage.error("获取文件列表失败");
    }
    fileNames.length = 0;
    res.data.forEach((item) => {
      fileNames.push(item);
    });
    // ElMessage.success("获取文件列表成功");
    // console.log(fileNames);
  } catch (err) {
    console.log(err);
  }
}

// 上传文件
async function submitUpload() {
  await uploadRef.value?.submit();
}

async function success() {
  getFilesName();
}

// 监听搜索输入
const handleSelect = (e) => {
  fileNames.length = 0;
  fileNames.push(e.value);
}

// 文件搜索
const querySearch = async (queryString,cb) => {
  await getFilesName();
  if(!queryString){
    await getFilesName();
    return ;
  }
  const result = fileNames.filter((item)=>{
    // console.log(item);
    return (new RegExp(`${queryString}`).test(item));
  })
  const searchedFileNames = [];
  result.forEach((item)=>{
    searchedFileNames.push({
      value: item,
    })
  })
  cb(searchedFileNames);
  fileNames.length = 0;//清空列表
  searchedFileNames.forEach((item) => {
    fileNames.push(item.value);
  })
 
};

// 监听文件搜索输入框清空
let clearFileNameInput = async function(e){
  await getFilesName();
}

onMounted(() => {
  getFilesName(); //获取文件列表
})

</script>

<script>
export default {
  name: "dataDownload",
  data() {
    return {};
  },
  methods: {},
};
</script>

<style lang='less' scoped>
.download {
  width: calc(100% - 3rem);
  height: 2rem;
  border: 1px solid black;
  box-sizing: border-box;

  .fileName {
    width: 50%;
    height: 100%;
    display: inline-block;
    box-sizing: border-box;
    border-right: 1px solid black;
    position: relative;
    top: -3px;
    text-align: center;
  }
  .download-button {
    height: 100%;
    margin-left: 23%;
  }
  .icon {
    margin-top: 5px;
  }
}

.upload {
  position: fixed;
  right: 20px;
  bottom: 20px;
  box-shadow: 1px 1px 5px rgb(204, 202, 202), -1px 1px 5px rgb(204, 202, 202),
    1px -1px 5px rgb(204, 202, 202), -1px -1px 5px rgb(204, 202, 202);
}

#dataDownload-card {
  display: flex;
  justify-content: space-between;
  .fileListBox {
    display: inline-block;
    width: 10rem;
    height: 5rem;
    box-sizing: border-box;

    margin: 10px;
    box-shadow: 1px 1px 5px rgb(212, 209, 209), -1px 1px 5px rgb(212, 209, 209),
      1px -1px 5px rgb(212, 209, 209), -1px -1px 5px rgb(212, 209, 209);
    transition: all 0.5s;
    .fileName {
      display: inline-block;
      width: 100%;
      height: 3rem;
      box-sizing: border-box;
      border-bottom: 1px solid black;
      font-size: 0.75rem;
      text-align: center;
    }
    .downLoadBtn {
      display: inline-block;
      width: 100%;
      height: calc(100% - 3rem);
      margin: 0;
      padding: 0;
      background: #f56c6c;
      text-align: center;
      color: white;
      cursor: pointer;
    }
    .icon {
      width: 0.75rem;
      height: 0.75rem;
    }
  }
  .fileListBox:hover {
    transform: translate(-5px, -5px);
  }

  .fileSearchInput{
    display: block;
  }
}
</style>